<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <!--<link rel="stylesheet" href="css/reset.css">-->
</head>
<body>
<div class="table-wrapper">
    <table id="table"></table>
</div>


<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {
        initTable();
    });

    function initTable() {
        $('#table').bootstrapTable({
            url: 'http://www.ommdata.com:81/demo/region/getListByParentIdAndPageParam', //请求后台的URL（*）,
            method: 'post', //请求方式（*）
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            treeCache: true,//子节点是否缓存，默认为true,即子节点在翻页前只加载一次
            pagination: true, //是否显示分页（*）
            sortable: true, //是否启用排序
            sortOrder: "asc", //排序方式
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）,
            pageListVisiable:false,//页码选择器是否显示，默认为true
            search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: false,
            showColumns: true, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: false, //是否启用点击选中行
            //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度(开启树形菜单后此项建议不配置)
            uniqueId: "id", //每一行的唯一标识，一般为主键列（若采用树形表格，该列必须配置，且无比与树形列的parentId value值相同）
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            queryParams: queryRecordParams,
            treeParams:{
                "parentId":"id",//key为ajax的key, value,对应row中的键，会根据该键取出对应的值
                "text":"text",
                constant:{//配置无差异的常量请求参数
                    "tom":10,
                    "jerry":20
                }
            },
            responseHandler: function (res) {
                return res;
            },
            columns: [
                {
                    field: 'text',
                    title: '区域',
                    align: "left",
                    tree: true,
                    url: "http://www.ommdata.com:81/demo/region/getListByParentId",
                }, {
                    field: 'parentId',
                    title: '父id',
                    align: "center",
                    formatter: testFormatter
                },
                {
                    field: 'parentId',
                    title: '父id',
                    align: "center",
                    formatter: testFormatter
                }
            ]
        });
    }

    function testFormatter(value, row, index) {
        return "©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号©2018 Baidu 使用百度前必读 意见反馈 京ICP证030173号  京公网安备11000002000001号  ";
    }

    function queryRecordParams(params) {
        return {
            pageSize: params.limit,
            pageNum: params.offset / params.limit + 1
        }
    }
</script>
</body>
</html>